<template>
	<el-dialog v-dialogDrag="dialogDragFn" showScale class="play-dialog" top="8vh" :visible.sync="visible" :close-on-click-modal="false"
		:close-on-press-escape="false" width="800px" @open="openVideoDialogFn" @close="closeVideoDialogFn">
		<!-- 标题栏 -->
		<div slot="title" class="d-flex a-center dialog-title">
			<span class="d-flex text-white font-weight font-md">{{(title?title:'')}}</span>
		</div>
		<el-dialog class="videoinnerDialog" v-dialogDrag :close-on-click-modal="false" width="500px"
			:title="(title||'')+'  下载进度'" :visible.sync="innerDownloadVisible" append-to-body>
			<div class="d-flex flex-column mr-10">
				<div class="d-flex mb-5" style="font-size: 15px;">下载中，请稍后...</div>
				<el-progress :text-inside="false" :stroke-width="18" text-color="#409eff"
					:percentage="downloadPercentage"></el-progress>
				<div style="height: 30px;"></div>
			</div>
		</el-dialog>
		<div class="playerMain">
			<d-player class="dplayer" :style="{height:bodyheight+'px'}" :options="videoOptions" ref="player"></d-player>
		</div>
	</el-dialog>
</template>

<script>
	let that;
	import * as clipboard from 'clipboard-polyfill'
	import VueDPlayer from '@/libs/vue-dplayer';
	require("/src/assets/style/vue-dplayer.css");
	export default {
		components: {
			'd-player': VueDPlayer,
		},
		data() {
			return {
				bodyheight:600,
				visible: false,
				innerDownloadVisible: false, //是否显示下载视频进度
				downloadPercentage:0,
				title: '',
				videoUrl: '',
				videoCover: '',
				videoOptions: {
					video: {
						url: '', //视频链接
						pic: '', //封面图
						thumbnails: '' //缩略图
					},
					theme: '#409eff', //主题色
					screenshot: true, //是否支持截图
					autoplay: true, //是否自动播放
					preload: 'auto', //预加载
					contextmenu: [
						{
							text: '下载视频',
							click: (e) => {
								this.downloadVideo();
							},
						},
						{
							text: '复制视频地址',
							click: (e) => {
								if(this.videoOptions.video.url){
									this.copyText(this.videoOptions.video.url);
									return;
								}
								this.$message({
									message: '复制失败！视频地址为空！',
									type: 'error',
									duration: 1500
								})
							},
						},
					]
				}
			}
		},
		created() {},
		mounted() {
			that = this;
		},
		computed: {},
		watch: {},
		methods: {
			copyText(text) {
				console.log(text);
				if(!text) {
					return that.$message({message: '数据为空，无法复制！',type: 'error',duration: 1500})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			dialogDragFn(e){
				if(e&&e.bodyheight){
					this.bodyheight = e.bodyheight;
				}
			},
			async downloadVideo() {
				this.innerDownloadVisible = true;
				if (this.downloadPercentage != 0) {
					that.$message({
						message: `请等待${this.title}下载完`,
						type: 'error',
						customClass: 'messageClass',
						duration: 2000,
					})
					this.innerDownloadVisible = true;
					return
				}
				let play_url = (this.videoOptions.video.url).replace("http://", "https://"),
					index = play_url.lastIndexOf("."),
					download_name = this.title + (play_url.substring(index, play_url.length));
				try {
					let x = new XMLHttpRequest();
					x.open("GET", play_url, true);
					x.addEventListener("progress", function(evt) {
						if (evt.lengthComputable) {
							let percentComplete = evt.loaded / evt.total;
							that.downloadPercentage = Math.floor(percentComplete * 100);
							if (that.downloadPercentage == 100) {
								that.innerDownloadVisible = false;
								that.downloadPercentage = 0;
								that.$message({
									message: `${that.title||'视频'}下载成功！`,
									type: 'success',
									duration: 2000
								})
							}
						}
					}, false);
					x.responseType = 'blob';
					x.onload = function(e) {
						//会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
						let url = window.URL.createObjectURL(x.response),
							a = document.createElement('a');
						a.href = url
						a.download = download_name;
						a.click();
						a.remove();
					}
					x.send();
				} catch (error) {
					that.innerDownloadVisible = false;
					that.downloadPercentage = 0;
					that.$message({
						message: '下载视频失败！',
						type: 'error',
						duration: 2000,
					})
					console.error(error);
				}
			},
			openVideoDialogFn() {
				if (this.player) {
					this.player.switchVideo({
						url: this.videoOptions.video.url,
						pic: this.videoOptions.video.pic
					});
				}
			},
			closeVideoDialogFn() {
				console.log(this.player);
				if (this.player) {
					this.player.pause();
					this.player.seek(0);
				}
			},
			init() {
				this.visible = true;
			},
			update(play_url, title, cover) {
				this.title = title;
				this.videoOptions.video.url = play_url;
				this.videoOptions.video.pic = cover;
				this.visible = true;
				this.$nextTick(() => {
					this.player = this.$refs.player.dp;
					this.player.play();
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.form {
		width: 540px;
	}
	.play-dialog{
		.dialog-title{
			min-height: 48px;
			padding: 0px 60px 0px 20px;
			background-color: #000000;
		}
		:deep(.el-dialog__header) {
			padding: 0px !important;
			background-color: rgba(0, 0, 0, 0.9);
		}
		:deep(.el-dialog__body) {
			padding: 0px!important;
		}
		:deep(.dialogTag){
			background-color: transparent;
		}
		:deep(.el-dialog__headerbtn) {
			width: 60px;
			height: 42px;
			font-size: 25px !important;
			top: 0px;
			right: 0px;
			background-color: rgba(255, 255, 255, 0.05);
		}
	}
	.videoinnerDialog :deep(.el-dialog__body) {
		padding: 0px 20px !important;
	}
	.dplayer {
		height: 600px;
	}
</style>